<template>
	<div style="height: 100%" ref="echart" >
	  正在加载......
	</div>
</template>

<script>
	import echarts from 'echarts'
	export default{
		props:{
			chartData:{
				type:Object,
				default(){
					return{
						xData:[],
						series:[]
					} 
				}
			},
			// 是否有坐标轴
			isAxisChart:{
				type:Boolean,
				default:true
			}
		},
		computed: {
			options() {
				return this.isAxisChart ? this.axisOption : this.normalOption
			},
			// 获取isCollase的变量(折叠时图表的变化)
			isCollase(){
				return this.$store.tab.isCollapse
			}
		},
		watch:{
			//监听图表的数据
			chartData:{
				handler:function(){
					this.initChart()
				},
				deep:true,
			},
			// 监听collapse
			iscollapse(){
				// 给折叠设置一个动画延迟
				setTimeout(()=>{
					this.resizeChart()
				},300)
			}
		},
		data(){
			return{
				echart:null,
				//有坐标轴的配置
				axisOption:{
					// 图例的设置
					legend:{
						textStyle:{
							color:'#333'
						}
					},
					//距左边20%的距离
					grid: {
					  left: '20%'
					},
					// 提示框的设置
					tooltip: {
					  trigger: 'axis'  //触发类型
					},
					// X轴
					xAxis:
						{
							type:'category',
							data:[],
							// x轴的轴线颜色
							axisLine: {
							  lineStyle: {
							    color: '#17b3a3'
							  }
							},
							// x坐标轴文本的颜色
							axisLabel:{						
								color:'#333'
							}
						},
					// Y轴 
					yAxis:[
						{ 
							type:'value',
							// y轴的轴线颜色
							axisLine: {
							  lineStyle: {
							    color: '#17b3a3'
							  }
							}
						}
					],
					color: [
					  '#2ec7c9',
					  '#b6a2de',
					  '#5ab1ef',
					  '#ffb980',
					  '#d87a80',
					  '#8d98b3',
					  '#e5cf0d',
					  '#97b552',
					  '#95706d',
					  '#dc69aa',
					  '#07a2a4',
					  '#9a7fd1',
					  '#588dd5',
					  '#f5994e',
					  '#c05050',
					  '#59678c',
					  '#c9ab00',
					  '#7eb00a',
					  '#6f5553',
					  '#c14089'
					],
					// 数据
					series:[]
				},
				//没有坐标轴的配置
				normalOption:{
					//提示框的设置
					tooltip: {
					  trigger: 'item'
					},
					color: ['#0f78f4', '#dd536b', '#9462e5', '#a6a6a6', '#e1bb22', '#39c362', '#3ed1cf'],
					series:[]
				}  
			}
		},
		methods:{
			// 初始化图表
			initChart(){ 
				this.initChartData()
				// 如果echart对象存在
				if(this.echart){
					this.echart.setOption(this.options)
				}else{
					// 初始化这个对象
					this.echart= echarts.init(this.$refs.echart)
					// 初始化完成之后
					this.echart.setOption(this.options)
				}
			},
			// 图表数据的处理
			initChartData(){
				// 初始化图表数据
				if(this.isAxisChart){
					this.axisOption.xAxis.data = this.chartData.xData
					this.axisOption.series = this.chartData.series
				}else{
					// 这是没有坐标的数据
					this.normalOption.series = this.chartData.series
				}
			}, 
			// 渲染图表尺寸(图表屏幕自适应)
			resizeChart(){
				this.echart ? this.echart.resize() : ''
			}
		},
		// 钩子函数(监听渲染图表)
		mounted() {
			window.addEventListener('resize',this.resizeChart)
		},
		// 销毁(防止内存泄漏)
		destroyed() {
			window.removeEventListener('resize',this.resizeChart)
		}
	}
</script>

<style>
</style>
